<template>
    <div class="troch" v-cloak>
      

 <!-- 服务顾问 -->
 <div class="shoes" >
        <transition name="Xslide-fade" >
        <div class="container" v-if="Navigation" >
                <ul class="orid clearfix">
                  <li>
                    <img src="../../../static/images/cjzx.png" alt="" /><a>集采中心</a
                    ><i class="glyphicon glyphicon-menu-right"></i>
                  </li>
                  <li>
                    <img src="../../../static/images/csfw.png" alt="" /><a>财税服务</a
                    ><i class="glyphicon glyphicon-menu-right"></i>
                  </li>
                  <li>
                    <img src="../../../static/images/flfw.png" alt="" /><a>法律服务</a
                    ><i class="glyphicon glyphicon-menu-right"></i>
                  </li>
                  <li>
                    <img src="../../../static/images/rlzy.png" alt="" /><a>人力资源</a
                    ><i class="glyphicon glyphicon-menu-right"></i>
                  </li>
                  <li>
                    <img src="../../../static/images/lj.png" alt="" /><a>供应链服务</a
                    ><i class="glyphicon glyphicon-menu-right"></i>
                  </li>
                  <li>
                    <img src="../../../static/images/zx.png" alt="" /><a>集咨询管理</a
                    ><i class="glyphicon glyphicon-menu-right"></i>
                  </li>
                  <li>
                    <img src="../../../static/images/jr.png" alt="" /><a>金融服务</a
                    ><i class="glyphicon glyphicon-menu-right"></i>
                  </li>
                  <li>
                    <img src="../../../static/images/pg.png" alt="" /><a>评估认证</a
                    ><i class="glyphicon glyphicon-menu-right"></i>
                  </li>
                  <li>
                    <img src="../../../static/images/dn.png" alt="" /><a>专业技术</a
                    ><i class="glyphicon glyphicon-menu-right"></i>
                  </li>
                  <li>
                    <img src="../../../static/images/zh.png" alt="" /><a>综合服务</a
                    ><i class="glyphicon glyphicon-menu-right"></i>
                  </li>
                </ul>
              </div>
              </transition>

    <div class="container main">
      <div class="posid"><p>您当前位置：服务超市>服务顾问</p></div>
      <div class="addlies hot_BJ">
        <div class="contse" >
          <span>领域：</span>
          <ul class="field">
            <li
              v-for="(item,index) in showdetailList"
              :class="{'action':kongo===index}"
              @click="speher(item,index)"
            >
              {{ item.nr }}
            </li>
          </ul>
        </div>
        <span class="pointer" v-if="showdetailList.length > 6" v-on:click="changeFoldState">{{brandFold?'更多∨':'收起∧'}}</span>
      </div>
      <div class="compos hot_BJ">
        <div class="keads">
          <span>排序：</span>
          <ul>
            <li
              v-for="(item,index) in sortdata"
              :class="{'action':sort===index}"
              @click="sotser(item,index)"
            >
              {{ item.nr }}
            </li>
          </ul>
        </div>
        <div class="hunt">
          <span>关键字：</span>
          <input type="text" class="form-control" id="exampleInputName2" />
          <button type="button" class="btn btn-primary">确定</button>
        </div>
      </div>

      <div class="prici" v-for="(item,index) in mation">
        <div style="z-index:0">
          <img src="../../../static/images/201904.png" alt="..." class="img-responsive" />
        </div>
        <div class="sbject hot_BJ">
          <div class="hoters">
            <p>
              <span class="ho_top">{{ item.hhr }}</span>
              <span :class="item.rz? 'stays' : ''">{{ item.rz }}</span>
            </p>
            <p class="text-overflow">所属机构：{{ item.ssjg }}</p>
            <p class="stedg">
              <span>业务擅长：{{ item.ywcz }}</span
              ><span
                >累计<i>{{ item.jy }}</i
                >笔交易</span
              >
            </p>
            <p class="minute">
              <span
                >客户评价：<i>{{ item.khpj }}</i></span
              >
              <span>态度：({{ item.dt }})</span>
              <span>专业：({{ item.zy }})</span>
              <span>响应：({{ item.xy }})</span>
              <span>价格：({{ item.jg }})</span>
            </p>
          </div>
          <div class="degs">
            <button class="btn btn-default" @click="release_demand">写需求</button>
            <br />
            <button class="btn btn-default">写评论</button>
          </div>
        </div>
      </div>
      <div class="greds"></div>
    </div>
  </div>
  
      <!--  -->
 
    </div>
 </template>

<script>
import headlogin from '../../views/localPage/headlogin'
      export default{
     
      data(){
        return{
          // 收起更多状态值
        selectterprise:false,
        selectstage:false,
        selectindustries:false,
        contentStatus: false,
        brandFold: true,
        // 收起更多状态值

        cur: 3,//导航栏的默认光标

          //选择项默认光标
        indus:0,
        stes:0,
        ters:0,
        sort: 0,
        kongo: 0,
        contact: 0,
          //选择项默认光标

        Navigation:false,//服务分类的隐藏显示

        navD: [
          { id: 1, zt: "首页" },
          { id: 2, zt: "采集中心" },
          { id: 3, zt: "服务机构" },
          { id: 4, zt: "服务顾问" },
          { id: 5, zt: "关于我们" }
        ],

        fielddata: [
          { id: "1", nr: "不限" },
          { id: "2", nr: "财税服务 " },
          { id: "3", nr: "法律服务  " },
          { id: "4", nr: "人力资源" },
          { id: "5", nr: "知识产权 " },
          { id: "6", nr: "供应链服务" },
          { id: "7", nr: "管理咨询" },
          { id: "8", nr: "金融服务" },
          { id: "9", nr: "评估认证" },
          { id: "10", nr: "专业技术" },
          { id: "11", nr: "综合服务" }
        ],
        // 排序
        sortdata: [
          { id: "1", nr: "综合" },
          { id: "2", nr: "人气 " },
          { id: "3", nr: "好评" },
          { id: "4", nr: "服务质量" }
        ],
        mation: [
          {
            hhr: "王振英/ 合伙人、主任会计师",
            rz: "已认证",
            ssjg: "苏州中合会计师事务所（普通合伙）",
            ywcz: "税收筹划及抗诉,内控咨询,新三版财务规范",
            khpj: "★★★★★",
            jy: "19",
            dt: "5",
            zy: "5",
            xy: "5",
            jg: "5"
          },
          {
            hhr: "王振英/ 合伙人、主任会计师",
            rz: "",
            ssjg: "苏州中合会计师事务所（普通合伙）",
            ywcz: "收筹划及抗诉,内控咨询,新三版财务规范",
            khpj: "★★★★★",
            jy: "19",
            dt: "5",
            zy: "5",
            xy: "5",
            jg: "5"
          },
          {
            hhr: "王振英/ 合伙人、主任会计师",
            rz: "",
            ssjg: "苏州中合会计师事务所（普通合伙）",
            ywcz: "收筹划及抗诉,内控咨询,新三版财务规范",
            khpj: "★★★★★",
            jy: "19",
            dt: "5",
            zy: "5",
            xy: "5",
            jg: "5"
          },
          {
            hhr: "王振英/ 合伙人、主任会计师",
            rz: "已认证",
            ssjg: "苏州中合会计师事务所（普通合伙）",
            ywcz: "收筹划及抗诉,内控咨询,新三版财务规范",
            khpj: "★★★★★",
            jy: "19",
            dt: "5",
            zy: "5",
            xy: "5",
            jg: "5"
          }
        ],
    
        // 业务
        areadata: [
          { id: "1", nr: "不限" },
          { id: "2", nr: "财税服务 " },
          { id: "3", nr: "法律服务  " },
          { id: "4", nr: "人力资源" },
          { id: "5", nr: "知识产权 " },
          { id: "6", nr: "供应链服务" },
          { id: "7", nr: "管理咨询" },
          { id: "8", nr: "金融服务" },
          { id: "9", nr: "评估认证" },
          { id: "10", nr: "专业技术" },
          { id: "11", nr: "综合服务" }
        ],
        // 所属行业
        region: [
          { id: "1", nr: "不限" },
          { id: "2", nr: "人工智能" },
          { id: "3", nr: "生物医药" },
          { id: "4", nr: "纳米技术" },
          { id: "5", nr: "互联网" },
          { id: "6", nr: "与移动互联网" },
          { id: "7", nr: "现代装备与先进制造 " },
          { id: "8", nr: "新能源与节能环保" },
          { id: "9", nr: "评估认证" },
          { id: "10", nr: "专业技术" },
          { id: "11", nr: "综合服务" }
        ],
        // 发展阶段
        development: [
          { id: "1", nr: "不限" },
          { id: "2", nr: "筹建期 " },
          { id: "3", nr: "初创期" },
          { id: "4", nr: "成熟期（上市前）" },
          { id: "5", nr: "成熟期（已上市）" }
        ],
        //企业性质
        devnt: [
          { id: "1", nr: "不限" },
          { id: "2", nr: "外资" },
          { id: "3", nr: "合资" },
          { id: "4", nr: "国企" },
          { id: "5", nr: "民营公司" },
          { id: "6", nr: "上市公司" },
          { id: "7", nr: "创业公司 " },
          { id: "8", nr: "外企代表处" },
          { id: "9", nr: "行政机关/事业单位" }
        ],
        mationdata: [
          {
            hhr: "王振英/ 合伙人、主任会计师",
            rz: "已认证",
            hyjg: "会员机构",
            tel: "0512-62550288",
            address: "江苏省苏州市工业园区若水路388号苏州纳米大学科技园H幢522室",
            khpj: "★★★★★",
            jy: "19",
            dt: "5",
            zy: "5",
            xy: "5",
            jg: "5"
          },
          {
            hhr: "王振英/ 合伙人、主任会计师",
            rz: "已认证",
            hyjg: "会员机构",
            tel: "0512-62550288",
            address: "江苏省苏州市工业园区若水路388号苏州纳米大学科技园H幢522室",
            khpj: "★★★★★",
            jy: "19",
            dt: "5",
            zy: "5",
            xy: "5",
            jg: "5"
          },
          {
            hhr: "王振英/ 合伙人、主任会计师",
            rz: "已认证",
            hyjg: "会员机构",
            tel: "0512-62550288",
            address: "江苏省苏州市工业园区若水路388号苏州纳米大学科技园H幢522室",
            khpj: "★★★★★",
            jy: "19",
            dt: "5",
            zy: "5",
            xy: "5",
            jg: "5"
          },
          {
            hhr: "王振英/ 合伙人、主任会计师",
            rz: "已认证",
            hyjg: "会员机构",
            tel: "0512-62550288",
            address: "江苏省苏州市工业园区若水路388号苏州纳米大学科技园H幢522室",
            khpj: "★★★★★",
            jy: "19",
            dt: "5",
            zy: "5",
            xy: "5",
            jg: "5"
          }
        ],
        aboutDta: [
          { id: 1, title: "超市介绍" },
          { id: 2, title: "会员权益" },
          { id: 3, title: "联系我们" }
        ]
      }
      },
      methods: {
        // 导航栏
        getItme: function(item, index) {
          this.cur = index;
          switch(index)
          {
                  case 0:
             
                  this.$router.push({ path:'/ServiceSupermarket/Home'})
                  break;
                  case 1:
           
                  this.$router.push({ path:'/ServiceSupermarket/GatheringCenter'})
                  break;
                  case 2:
              
                    this.$router.push({ path:'/ServiceSupermarket/ServiceOrganization'})
                  break;
                  case 3:
                  
                    this.$router.push({ path:'/ServiceSupermarket/ServiceConsultant'})
                  break;
                  case 4:
                  
                    this.$router.push({ path:'/ServiceSupermarket/About'})
                  break;
          }
        },
       

       
        // 服务顾问
        changeFoldState() {
            this.brandFold = !this.brandFold;
            },
        //领域
        speher: function(item, index) {
            this.kongo = index;
        },
        //排序
        sotser:function(item, index){
            this.sort=index;

        },
        //写需求
        release_demand(){
                  this.$router.push({path:'/ServiceSupermarket/CreateDemand',query:{test:3}})

         },
       
      },
      computed: {
        // 服务顾问
        showdetailList: {
        get: function() {
            if (this.brandFold) {
            if (this.fielddata.length < 10) {
                return this.fielddata;
            }
            let newArr = [];
            for (var i = 0; i < 9; i++) {
                let item = this.fielddata[i];
                newArr.push(item);
            }
            return newArr;
            }
            return this.fielddata;
        },
        set: function(val) {
            this.showdetailList = val;
        },
        
        }

      },
      components:{headlogin}     
      
   
    }
    
    
    
    
    </script>
<style scoped>
.posid{
  padding:50px 0 20px 0;
}
.posid p{
  font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 22px;
	letter-spacing: 1px;
	color: #999999;
}
.addlies{
  height: auto;
}
.XT{
  border-bottom: 1px solid #e0e0e0;
}
.gured{
  width: 40%;
  display: flex;
  align-items: center;
  height: 100px;
  padding-left: 40px;
}
.gured>span{
  width: 138px;
  display: inline-block;
}
.addlies>span{
  display: inline-block;
  height: 60px;
  line-height: 60px;
  color: #0060ff;
}
.addlies,.compos,.keads,.contse{
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.addlies{
  padding-bottom: 0;
}
.contse{
  width: 90%;
  padding-bottom: 0;
}
.contse .field{
  width: 94%;
}
.contse span{
  display: inline-block;
  width: 60px;
}
.contse ul li,.compos ul li{
  float: left;
  display: inline-block;
  width: 90px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  margin-bottom: 5px;
}

.compos{
  height: 60px;
  margin: 20px 0 30px 0;
  line-height: 60px;
  align-items: center;

}
.greds{
  height: 150px;
}
.greds .pagination{
  justify-content: flex-end;
}
.greds .pagination li{
  margin-left: 10px;
  width: 26px;
	height: 25px;
	box-shadow: 0px 1px 1px 0px 
		rgba(0, 0, 0, 0.12);
	border-radius: 3px;
  border: solid 1px #1575f9;
  text-align: center;
}
.currpage{
  background-color: #0060ff;
  color: white;
}
.compos ul li{
  margin-top: 15px;
  height: 30px;
  text-align: center;
  line-height: 30px;
}
.action{
  background-color: #0060ff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}
.prici{
  margin-bottom: 20px;
 position: relative;
}
.sbject{
  position: absolute;
  right:0;
  top: 20px;
  z-index:1;
  height: 234px;
  width: 73%;
  padding: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hoters{
  width: 80%;
}
.hoters .ho_top{
  width: 266px;
	height: 20px;
  font-size: 20px;
	font-weight:600;
	line-height: 24px;
	letter-spacing: 1px;
	color: #000000;
}
.stays,.card{
  margin-left: 15px;
  display: inline-block;
  padding: 5px 10px 5px 10px;
	border-radius: 4px;
  border: solid 1px #379aff;
  text-align: center;
}
.stedg{
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 20px;
}
.stedg span:last-child,.variety{
  font-size: 12px;
	line-height: 32px;
	letter-spacing: 1px;
	color: #666666;
}
.stedg i{
	letter-spacing: 1px;
  color: #0060ff;
  font-style: normal;
}
.minute span{
  margin-right:10px;
}
.minute i{
  color: #0060ff;
  font-style: normal;
}
.degs button{
  margin-bottom: 10px;
}
.btn-default{
  background: white;
}
.btn-default,.btn-primary{
  border-color: #0060ff;
}
.btn-default:hover,.btn-primary{
  background-color:#0060ff;
  color: white;
}
.hunt{
  width: 40%;
  display: flex;
  justify-content:space-between;
  align-items: center;
}
.hunt .form-control{
  width: 55%;
  margin-right: 30px;
}
</style>
    